<template>
	<div class="page-container">
		<!-- 订单头部 -->
		<u-cell class="card-header" :title="'订单ID：' + order.id" :label="`订单时间：${order.order_time}`">
			<view slot="value"><u-tag :text="orderStatus()" type="warning"></u-tag></view>
		</u-cell>

		<!-- 商品列表 -->
		<view class="u-product" v-for="(item, i) in order.detailList" :key="i" @click="onDetail(item.id)">
			<view class="__left"><u--image :src="$fullUrl(item.product_pic)" width="80" height="80"></u--image></view>
			<view class="__right">
				<text class="__title u-line-1">{{ item.product_name }}</text>
				<text class="__spec u-line-1">{{ item.product_spec }}</text>
				<text class="__price">
					${{ item.price }}
					<span class="__count">x{{ item.count }}</span>
				</text>
			</view>
		</view>

		<!-- 订单备注 -->
		<u-cell title="订单备注" :value="order.remark" label="" />

		<!-- 配送信息 -->
		<u-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />
		<!-- 收货地址 -->
		<u-cell title="收货地址">
			<view slot="label" class="u-slot-label">
				<div>{{ order.receiver }} {{ order.phone }}</div>
				<div>{{ order.address }}</div>
			</view>
		</u-cell>

		<!-- 商品总额 -->
		<u-cell title="商品总额"><u--text slot="value" mode="price" :text="orderAmount" color="red" bold align="right"></u--text></u-cell>
		<br />
		<!-- 去支付按钮 -->
		<div v-if="order.id && order.status == 0"><u-button type="primary" size="large" @click="onClickPay">去支付</u-button></div>
		<br />
		<!-- 删除按钮 -->
		<div v-if="order.id"><u-button type="error" size="large" @click="onClickDelete">删除订单</u-button></div>
	</div>
</template>

<script>
import * as OrderAPI from '@/api/order.js';

export default {
	data() {
		return {
			order: {
				id: null,
				detailList: []
			}
		};
	},

	computed: {
		//计算一个订单的总金额
		orderAmount() {
			let amount = 0;
			this.order.detailList.forEach(item => {
				amount += item.count * item.price;
			});
			return amount.toFixed(2);
		}
	},
	// 生命周期方法
	onLoad(options) {
		this.order.id = options.orderId;
		this.getOrder();
	},
	methods: {
		getOrder() {
			OrderAPI.getOrderDetailById(this.order.id).then(result => {
				this.order = result.data;
			});
		},

		//订单状态格式转换
		orderStatus() {
			let status = '未知';
			switch (this.order.status) {
				case 0:
					status = '未支付';
					break;
				case 1:
					status = '已支付';
					break;
				case -1:
					status = '已取消';
					break;
			}
			return status;
		},

		onClickPay() {
			uni.$u.toast('还未实现....');
		},

		//触发删除订单
		onClickDelete() {
			OrderAPI.deleteOrderById(this.order.id).then(() => {
				uni.$u.toast('订单已删除');
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	padding: 15px 15px 15px 15px;
}
.card-header {
	font-size: 14px;
	font-weight: bolder;
}
</style>
